<template>
    <div class="page-sell">
        <van-nav-bar
            :title="$t('m.PropertyForRentAndSell')"
            left-arrow
            @click-left="onClickLeft"
        />
        <!--type-->
        <van-field
            disabled
            v-model="form.listingType"
            :label="$t('m.Type')"
            required
            :error="validate.condition"
            type="hidden"
            class="condition-modify"
        >
            <van-radio-group slot="button" v-model="form.transactionTypeId">
                <van-radio name="2" style="display: inline-block" @click="onClickRadio">{{$t('m.Rent')}}</van-radio>
                <van-radio name="1" style="display: inline-block" @click="onClickRadio">{{$t('m.Sale')}}</van-radio>
            </van-radio-group>
        </van-field>
        <!--property type-->
        <van-field
            disabled
            v-model="form.propertyTypeTitle"
            :label="$t('m.PropertyType')"
            :placeholder="$t('m.Pleasechoose')"
            required
            @click-icon="onSelectPropertyType"
            @click.native="onSelectPropertyType"
            :error="validate.houseType"
        >
            <van-icon slot="icon" name="arrow"></van-icon>
        </van-field>
        <!--图片上传-->
        <van-field
            disabled
            :label="$t('m.Photo')"
            placeholder=""
            required
            class="photo-title"
        >
        </van-field>
        <div class="upload-box">
            <van-uploader class="upload-item" :after-read="onReadCoverPhoto">
                <van-icon name="photograph"/>
                <div class="cover-text">{{$t('m.cover')}}</div>
                <van-icon v-if="form.coverPhoto" @click="onCoverPhotoCancel" name="close" class="photo-close"/>
                <img v-if="form.coverPhoto" class="readed-photo" :src="form.coverPhoto" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 1)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[1]" @click="onOtherPhotoArrDel(1)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[1]" class="readed-photo" :src="form.otherPhoto[1]" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 2)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[2]" @click="onOtherPhotoArrDel(2)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[2]" class="readed-photo" :src="form.otherPhoto[2]" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 3)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[3]" @click="onOtherPhotoArrDel(3)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[3]" class="readed-photo" :src="form.otherPhoto[3]" alt="">
            </van-uploader>
        </div>
        <div class="upload-box">
            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 4)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[4]" @click="onOtherPhotoArrDel(4)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[4]" class="readed-photo" :src="form.otherPhoto[4]" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 5)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[5]" @click="onOtherPhotoArrDel(5)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[5]" class="readed-photo" :src="form.otherPhoto[5]" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 6)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[6]" @click="onOtherPhotoArrDel(6)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[6]" class="readed-photo" :src="form.otherPhoto[6]" alt="">
            </van-uploader>

            <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 7)}">
                <van-icon name="photograph"/>
                <van-icon v-if="form.otherPhoto[7]" @click="onOtherPhotoArrDel(7)" name="close"
                          class="photo-close"/>
                <img v-if="form.otherPhoto[7]" class="readed-photo" :src="form.otherPhoto[7]" alt="">
            </van-uploader>
        </div>
        <!--location-->
        <van-field
            disabled
            v-model="form.location"
            :label="$t('m.Township')"
            :placeholder="$t('m.Pleasechoose')"
            required
            @click-icon="onSelectRegionTownShip"
            @click.native="onSelectRegionTownShip"
            :error="validate.location"
        >
            <van-icon slot="icon" name="arrow"></van-icon>
        </van-field>
        <!--address-->
        <div class="address-wraper">
            <span class="address">{{$t('m.Address')}}</span>
            <input type="text" v-model="form.street" class="address-input">
        </div>
        <!--Total buiding floors-->
        <!--当propertyType为land（4）时，不显示总楼层信息-->
        <van-field
            disabled
            v-model="form.totalFloorText"
            :label="$t('m.TotalBuildingFloors')"
            :placeholder="$t('m.Pleasechoose')"
            required
            @click-icon="onSelectTotalBuilding"
            @click.native="onSelectTotalBuilding"
            :error="validate.location"
            v-if="this.form.propertyTypeId!=4"
        >
            <van-icon slot="icon" name="arrow"></van-icon>
        </van-field>
        <!--building floor-->
        <!--当propertyType为house（3）或land（4）时，不显示楼层信息-->
        <van-field
            disabled
            v-model="form.floorNumText"
            :label="$t('m.FloorNumber')"
            :placeholder="$t('m.Pleasechoose')"
            required
            @click-icon="onSelectBuildingFloor"
            @click.native="onSelectBuildingFloor"
            :error="validate.location"
            v-if="this.form.propertyTypeId!=3 && this.form.propertyTypeId!=4"
        >
            <van-icon slot="icon" name="arrow"></van-icon>
        </van-field>
        <!--当propertyType为land（4）时不显示room details-->
        <div class="room-detail" v-if="this.form.propertyTypeId!=4">
            <van-field
                disabled
                v-model="form.masterRoomText"
                :label="$t('m.Master')"
                :placeholder="$t('m.Pleasechoose')"
                required
                @click-icon="onSelectMasterRoom"
                @click.native="onSelectMasterRoom"
                :error="validate.location"
            >
                <van-icon slot="icon" name="arrow"></van-icon>
            </van-field>
            <van-field
                disabled
                v-model="form.bedRoomText"
                :label="$t('m.Bedrooms')"
                :placeholder="$t('m.Pleasechoose')"
                required
                @click-icon="onSelectBedRoom"
                @click.native="onSelectBedRoom"
                :error="validate.location"
            >
                <van-icon slot="icon" name="arrow"></van-icon>
            </van-field>
            <van-field
                disabled
                v-model="form.bathRoomText"
                :label="$t('m.Bathrooms')"
                :placeholder="$t('m.Pleasechoose')"
                required
                @click-icon="onSelectBathRoom"
                @click.native="onSelectBathRoom"
                :error="validate.location"
            >
                <van-icon slot="icon" name="arrow"></van-icon>
            </van-field>
            <!--<span class="master">Master</span>-->
            <!--<div class="property-outer-wraper">-->
                <!--<div class="property-inner-wraper" @click="showMasterroomList">-->
                    <!--<input type="text" class="property-input" v-model="masterroom">-->
                    <!--<div class="triangle-wraper">-->
                        <!--<div :class="['triangle',{'reverse':showMasterroom}]">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="property-list" v-if="showMasterroom">-->
                    <!--<div v-for="item in masters" class="property-item"-->
                         <!--@click="setMasterroom(item.value,item.text)" :key="item.value">{{item.text}}-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<span class="bedroom">Bedrooms</span>-->
            <!--<div class="property-outer-wraper">-->
                <!--<div class="property-inner-wraper" @click="showBedroomList">-->
                    <!--<input type="text" class="property-input" v-model="bedroom">-->
                    <!--<div class="triangle-wraper">-->
                        <!--<div :class="['triangle',{'reverse':showBedroom}]">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="property-list" v-if="showBedroom">-->
                    <!--<div v-for="item in bedrooms" class="property-item"-->
                         <!--@click="setBedroom(item.value,item.text)" :key="item.value">{{item.text}}-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<span class="bathroom">Bathrooms</span>-->
            <!--<div class="property-outer-wraper">-->
                <!--<div class="property-inner-wraper" @click="showBathroomList">-->
                    <!--<input type="text" class="property-input" v-model="bathroom">-->
                    <!--<div class="triangle-wraper">-->
                        <!--<div :class="['triangle',{'reverse':showBathroom}]">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="property-list" v-if="showBathroom">-->
                    <!--<div v-for="item in bathrooms" class="property-item"-->
                         <!--@click="setBathroom(item.value,item.text)" :key="item.value">{{item.text}}-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <!--当propertyType为land（4）时不显示floorSize信息-->
        <div v-if="this.form.propertyTypeId!=4" class="floorsize-area">
            <van-field
                disabled
                v-model="form.condition"
                :label="$t('m.FloorSizefeet')"
                required
                :error="validate.condition"
                type="hidden"
                class="condition-modify"
            >
                <van-radio-group slot="button" v-model="form.floorSize">
                    <van-radio name="0" style="display: inline-block" @click="selectFloorSizeType(0)">{{$t('m.LengthWidth')}}</van-radio>
                    <van-radio name="1" style="display: inline-block" @click="selectFloorSizeType(1)">{{$t('m.Area')}}</van-radio>
                </van-radio-group>
            </van-field>
            <div class="width-height" v-if="form.floorSize==0">
                <!--如果Area不为空，length和width禁止输入-->
                <div v-if="!form.floorArea" class="wd-wraper">
                    <span>Length</span>
                    <input type="text" v-model="form.floorLength">
                    <span>xWidth</span>
                    <input type="text" v-model="form.floorWidth">
                    <span>={{computeFloorSize}}</span>
                </div>
                <div v-else class="wd-wraper">
                    <span>Length</span>
                    <input type="text" v-model="form.floorLength" disabled>
                    <span>x Width</span>
                    <input type="text" v-model="form.floorWidth" disabled>
                    <span>={{computeFloorSize}}</span>
                </div>
            </div>
            <div v-else class="ar-wraper">
                <!--如果length和width不为空，Area禁止输入-->
                <span>Area</span>
                <input type="text"  v-model="form.floorArea" v-if="!form.floorLength && !form.floorWidth"/>
                <input type="text"  v-model="form.floorArea" v-else disabled>
            </div>
        </div>
        <!--propertyType为Apartment(1)或condo(2)时，不显示land信息-->
        <div v-if="this.form.propertyTypeId!=1 && this.form.propertyTypeId!=2" class="floorsize-area">
            <van-field
                disabled
                v-model="form.condition"
                :label="$t('m.LandSizefeet')"
                required
                :error="validate.condition"
                type="hidden"
                class="condition-modify"
            >
                <van-radio-group slot="button" v-model="form.landSize">
                    <van-radio name="0" style="display: inline-block" @click="selectLandSizeType(0)">{{$t('m.LengthWidth')}}</van-radio>
                    <van-radio name="1" style="display: inline-block" @click="selectLandSizeType(1)">{{$t('m.Area')}}</van-radio>
                </van-radio-group>
            </van-field>
            <div class="width-height" v-if="form.landSize==0">
                <!--如果Area不为空，length和width禁止输入-->
                <div v-if="!form.landArea" class="wd-wraper">
                    <span>Length</span>
                    <input type="text" v-model="form.landLength">
                    <span>xWidth</span>
                    <input type="text" v-model="form.landWidth">
                    <span>={{computeLandSize}}</span>
                </div>
                <div v-else class="wd-wraper">
                    <span>Length</span>
                    <input type="text" v-model="form.landLength" disabled>
                    <span>xWidth</span>
                    <input type="text" v-model="form.landWidth" disabled>
                    <span>={{computeLandSize}}</span>
                </div>
            </div>
            <div v-else class="ar-wraper">
                <!--如果length和width不为空，Area禁止输入-->
                <span>Area</span>
                <input type="text"  v-model="form.landArea" v-if="!form.landLength && !form.landWidth"/>
                <input type="text"  v-model="form.landArea" v-else disabled>
            </div>
        </div>
        <!--price-->
        <van-field
            v-model="form.price"
            type="text"
            :label="$t('m.PriceKyat')"
            :placeholder="$t('m.Pleaseenter')"
            required
            :error="validate.price"
            v-on:input="onValueChange($event, 'price')"
        >
            <van-button slot="button" size="small" type="default" @click="form.priceType = form.priceType == 1 ? 2
                    : 1">{{form.priceType == 1 ? $t('m.Kyat') : $t('m.Lakh') }}
            </van-button>
        </van-field>
        <!--desc-->
       <div class="desc-area">
           <div class="desc-title">
               <span>Description</span>
               <span>0/2000</span>
           </div>
           <textarea name="" id="" cols="20" rows="10"></textarea>
       </div>
        <!--下面都是弹出层,集中放置，便于查找-->
        <!--房产类型的弹出层-->
        <van-popup v-model="propertyTypeShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="onSubTypeCancel">{{$t('m.Cancel')}}</div><!---->
                <div class="van-picker__confirm" @click="onSubTypeConfirm">{{$t('m.Confirm')}}</div>
            </div>
            <van-tree-select
                :items="items1"
                :main-active-index="mainActiveIndex1"
                :active-id="activeId1"
                @navclick="onNavClick1"
                @itemclick="onItemClick1"
            />
        </van-popup>
        <!--location选择的弹出层-->
        <van-popup v-model="townshipModalShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="onTownshipCancel">{{$t('m.Cancel')}}</div><!---->
                <div class="van-picker__confirm" @click="onTownshipConfirm">{{$t('m.Confirm')}}</div>
            </div>
            <van-tree-select
                :items="items2"
                :main-active-index="mainActiveIndex2"
                :active-id="activeId2"
                @navclick="onNavClick2"
                @itemclick="onItemClick2"
            />
        </van-popup>
        <!--total building floor 弹出层-->
        <van-popup v-model="totalBuildingShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="totalBuildingCancel">{{$t('m.Cancel')}}</div><!---->
                <!--<div class="van-picker__confirm" @click="totalBuildingConfirm">{{$t('m.Confirm')}}</div>-->
            </div>
            <van-cell-group>
                <van-cell @click="totalBuildingConfirm(item)" v-for="item in floorsTotal" :key="item.id"
                          :title="item.text"/>
            </van-cell-group>
        </van-popup>
        <!--building floor 弹出层-->
        <van-popup v-model="buildingFloorShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="buildingFloorCancel">{{$t('m.Cancel')}}</div><!---->
                <!--<div class="van-picker__confirm" @click="buildingFloorConfirm">{{$t('m.Confirm')}}</div>-->
            </div>
            <van-cell-group>
                <van-cell @click="buildingFloorConfirm(item)" v-for="item in floors" :key="item.id"
                          :title="item.text"/>
            </van-cell-group>
        </van-popup>
        <!--master room 弹出层-->
        <van-popup v-model="masterRoomShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="masterRoomCancel">{{$t('m.Cancel')}}</div><!---->
                <!--<div class="van-picker__confirm" @click="masterRoomConfirm">{{$t('m.Confirm')}}</div>-->
            </div>
            <van-cell-group>
                <van-cell @click="masterRoomConfirm(item)" v-for="item in masters" :key="item.id"
                          :title="item.text"/>
            </van-cell-group>
        </van-popup>
        <!--bed room 弹出层-->
        <van-popup v-model="bedRoomShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="bedRoomCancel">{{$t('m.Cancel')}}</div><!---->
                <!--<div class="van-picker__confirm" @click="bedRoomConfirm">{{$t('m.Confirm')}}</div>-->
            </div>
            <van-cell-group>
                <van-cell @click="bedRoomConfirm(item)" v-for="item in bedrooms" :key="item.id"
                          :title="item.text"/>
            </van-cell-group>
        </van-popup>
        <!--bath room 弹出层-->
        <van-popup v-model="bathRoomShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="bathRoomCancel">{{$t('m.Cancel')}}</div><!---->
                <!--<div class="van-picker__confirm" @click="bathRoomConfirm">{{$t('m.Confirm')}}</div>-->
            </div>
            <van-cell-group>
                <van-cell @click="bathRoomConfirm(item)" v-for="item in bathrooms" :key="item.id"
                          :title="item.text"/>
            </van-cell-group>
        </van-popup>


        <!--<div class="sumbit-box">-->
            <!--<div class="submit-btn" v-if="goodsId">-->
                <!--<div v-if="status == 1">-->
                    <!--<van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>-->
                    <!--<div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>-->
                    <!--<van-button type="default" size="large" s tyle="margin-bottom: 10px;" @click="onEditStatus(6)">-->
                        <!--{{$t('m.Deactivate')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(3)">-->
                        <!--{{$t('m.Markassold')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
                <!--<div v-if="status == 2">-->
                    <!--<van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>-->
                    <!--<div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">-->
                        <!--{{$t('m.Post')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
                <!--<div v-if="status == 6">-->
                    <!--<van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>-->
                    <!--<div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">-->
                        <!--{{$t('m.Activate')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(3)">-->
                        <!--{{$t('m.Markassold')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
                <!--<div v-if="status == 3">-->
                    <!--<van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>-->
                    <!--<div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">-->
                        <!--{{$t('m.Activate')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(6)">-->
                        <!--{{$t('m.Deactivate')}}-->
                    <!--</van-button>-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
                <!--<div v-if="status == 7">-->
                    <!--<van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>-->
                    <!--<div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
                <!--<div v-if="status == 8 || status == 5">-->
                    <!--<van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

    </div>
</template>
<script>
    // 英文json
    import regions from '../../static/json/region'
    import townships from '../../static/json/township'
    import propertyType from '../../static/json/propertyType'
    import propertySubType from '../../static/json/propertySubType'
    import categoryJson from '../../static/json/category'

    import floors from '../../static/json/floor'
    import floorsTotal from '../../static/json/floorTotal'
    import masterBedroomBathroom from '../../static/json/master_bedroom_bathroom'
    import currencyData from '../../static/json/CurrencyData'
    import furnishingType from '../../static/json/furnishingType'
    import facingType from '../../static/json/facingType'
    import indoorFeaturesType from '../../static/json/indoorFeaturesType'
    import outdoorFeaturesType from '../../static/json/outdoorFeaturesType'
    import specialFeaturesType from '../../static/json/specialFeaturesType'
    // 缅甸文json
    import mm_regions from '../../static/mmJson/region'
    import mm_townships from '../../static/mmJson/township'
    import mm_propertyType from '../../static/mmJson/propertyType'
    import mm_propertySubType from '../../static/mmJson/propertySubType'
    import mm_categoryJson from '../../static/mmJson/category'

    import mm_floors from '../../static/mmJson/floor'
    import mm_floorsTotal from '../../static/mmJson/floorTotal'
    import mm_masterBedroomBathroom from '../../static/mmJson/master_bedroom_bathroom'
    import mm_currencyData from '../../static/mmJson/CurrencyData'
    import mm_furnishingType from '../../static/mmJson/furnishingType'
    import mm_facingType from '../../static/mmJson/facingType'
    import mm_indoorFeaturesType from '../../static/mmJson/indoorFeaturesType'
    import mm_outdoorFeaturesType from '../../static/mmJson/outdoorFeaturesType'
    import mm_specialFeaturesType from '../../static/mmJson/specialFeaturesType'
    // 缅甸unicode
    import mmu_regions from '../../static/mmUnicodeJson/region'
    import mmu_townships from '../../static/mmUnicodeJson/township'
    import mmu_propertyType from '../../static/mmUnicodeJson/propertyType'
    import mmu_propertySubType from '../../static/mmUnicodeJson/propertySubType'
    import mmu_categoryJson from '../../static/mmUnicodeJson/category'

    import qs from 'qs';
    // Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
    import EXIF from 'exif-js'

    import {uploadAgentPhotos, uploadAgentInfo, uploadAgentFormPhotos, initAgent, updateAgentInfo} from '../../static/api/guc_api'


    export default {
        data() {
            return {
                propertyTypeShow:false,
                townshipModalShow:false,
                totalBuildingShow:false,
                buildingFloorShow:false,
                masterRoomShow:false,
                bedRoomShow:false,
                bathRoomShow:false,
                // type
                items1: [],
                mainActiveIndex1: 0,
                activeId1: 0,
                //location
                items2: [],
                mainActiveIndex2: 0,
                activeId2: 0,

                form: {
                    //提交表单的字段，从上往下排列
                    transactionTypeId: '2',
                    propertyTypeTitle:'',
                    propertyTypeId: '',
                    propertySubTypeId: '',

                    location: '',
                    regionId:'',
                    townshipId:'',

                    street:'',

                    totalFloorText:'',
                    floorNumText:'',

                    masterRoomText:'',
                    bedRoomText:'',
                    bathRoomText:'',

                    floorSize:'0',
                    floorLength:'',
                    floorWidth:'',
                    floorArea:'',
                    landSize:'0',
                    landLength:'',
                    landWidth:'',
                    landArea:'',
                    priceType:'',
                    coverPhoto: '',
                    coverPhotoBlob: '',
                    otherPhoto: [],
                    otherPhotoBlob: [],
                },
                validate: {
                    category: true,
                    title: true,
                    price: true,
                    condition: true,
                    location: true,
                    houseType:true,
                },
                // conditionRadio: '',
                activeName: '1',
                // propertySubType: [],
                //控制下拉框里的内容，从上到下写，方便查找
                firstProperty: '',
                secondProperty: '',
                buildingFloor: '',
                floor: '',
                masterroom: '',
                bedroom: '',
                bathroom: '',
                // 控制下拉框是否显示,从上到下写，方便查找
                showFirstList: false,
                showSecondList: false,
                showTotalFloor: false,
                showFloor: false,
                showMasterroom: false,
                showBedroom: false,
                showBathroom: false,
            }
        },
        methods: {
            // 页面返回
            onClickLeft() {
                this.$router.go(-1)
            },
            //转字体的方法
            translateUTZaw(str) {
                if (!str) return '';
                return this.$translateLang(str, 'unicodeTozawgyi')
            },
            translateZTUnicode(str) {
                if (!str) return '';
                return this.$translateLang(str, 'zawgyiTounicode')
            },
            // 房产类型处理逻辑
            onSubTypeCancel() {
                this.propertyTypeShow = false;
            },
            onSubTypeConfirm() {
                // 左侧导航无法拿到id 只能拿到递增index 无用  处理方案为必须选择 township
                if (this.activeId1 == 0) {
                    this.$toast.fail('Please Select SubType')
                    return;
                } else {
                    for (let j in this.propertySubType) {
                        if (this.propertySubType[j].value == this.activeId1) {
                            for (let i in this.propertyType) {
                                if (this.propertyType[i].value == this.propertySubType[j].propertyTypeId) {
                                    this.form.propertyTypeTitle = this.propertyType[i].text;
                                    this.form.propertyTypeId = this.propertyType[i].value;
                                }
                            }
                            this.form.propertySubTypeId = this.propertySubType[j].value;
                            this.form.propertyTypeTitle = this.form.propertyTypeTitle + '/' + this.propertySubType[j].text;
                        }
                    }
                    this.propertyTypeShow = false;
                    this.validate.houseType = false;
                }
            },
            onSelectPropertyType() {
                this.propertyTypeShow = true;
            },
            onNavClick1(index) {
                this.mainActiveIndex1 = index;
            },
            onItemClick1(data) {
                this.activeId1 = data.id;
            },
            // 区域选择处理逻辑
            onTownshipCancel() {
                this.townshipModalShow = false;
            },
            onTownshipConfirm() {
                // 左侧导航无法拿到id 只能拿到递增index 无用  处理方案为必须选择 township
                if (this.activeId2 == 0) {
                    this.$toast.fail('Please Select TownShip')
                    return;
                } else {
                    for (let j in this.townshipJson) {
                        if (this.townshipJson[j].value == this.activeId2) {
                            for (let i in this.regionJson) {
                                if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                                    this.form.location = this.regionJson[i].text;
                                    this.form.regionId = this.regionJson[i].value;
                                }
                            }
                            this.form.townshipId = this.townshipJson[j].value;
                            this.form.location = this.form.location + '/' + this.townshipJson[j].text;
                        }
                    }
                    this.townshipModalShow = false;
                    this.validate.location = false;
                }
            },
            onSelectRegionTownShip() {
                this.townshipModalShow = true;
            },
            onNavClick2(index) {
                this.mainActiveIndex2 = index;
            },
            onItemClick2(data) {
                this.activeId2 = data.id;
            },
            //总楼层选择处理逻辑
            onSelectTotalBuilding() {
                this.totalBuildingShow = true;
            },
            totalBuildingCancel(){
                this.totalBuildingShow = false;
            },
            totalBuildingConfirm(item){
                this.form.totalFloorText=item.text
                this.form.totalFloorValue=item.value
                this.totalBuildingShow = false;
            },
            //楼层选择处理逻辑
            onSelectBuildingFloor() {
                this.buildingFloorShow = true;
            },
            buildingFloorCancel(){
                this.buildingFloorShow = false;
            },
            buildingFloorConfirm(item){
                this.form.floorNumText=item.text
                this.form.floorNumValue=item.value
                this.buildingFloorShow = false;
            },
            //master room 选择处理逻辑
            onSelectMasterRoom() {
                this.masterRoomShow = true;
            },
            masterRoomCancel(){
                this.masterRoomShow = false;
            },
            masterRoomConfirm(item){
                this.form.masterRoomText=item.text
                this.form.masterRoomValue=item.value
                this.masterRoomShow = false;
            },
            //bed room 选择处理逻辑
            onSelectBedRoom() {
                this.bedRoomShow = true;
            },
            bedRoomCancel(){
                this.bedRoomShow = false;
            },
            bedRoomConfirm(item){
                this.form.bedRoomText=item.text
                this.form.bedRoomValue=item.value
                this.bedRoomShow = false;
            },
            //bath room 选择处理逻辑
            onSelectBathRoom() {
                this.bathRoomShow = true;
            },
            bathRoomCancel(){
                this.bathRoomShow = false;
            },
            bathRoomConfirm(item){
                this.form.bathRoomText=item.text
                this.form.bathRoomValue=item.value
                this.bathRoomShow = false;
            },
            //提交表单
            submitAgentForm(status, coverUrl) {
                // let coverPhoto = coverUrl || ''
                let googleMapInfo = this.$refs.googleMap
                //货币选择--传price值
                if (this.agentForm.currencyId == 1) {
                    this.agentForm.mmkPrice = this.agentForm.price
                    this.agentForm.usdPrice = null
                } else {
                    this.agentForm.usdPrice = this.agentForm.price
                    this.agentForm.mmkPrice = null
                }
                // 有id -- 编辑页面信息
                if (this.id) {
                    let updatePhotoReqList = []
                    let uploadPhotos = this.$refs.uploadPhotos.uploadPhotoList
                    for (let i = 0; i < uploadPhotos.length; i++) {
                        if (uploadPhotos[i].photoId) {
                            let potoReq = {
                                orderNumber: i,
                                id: uploadPhotos[i].photoId
                            }
                            updatePhotoReqList.push(potoReq)
                        }
                    }
                    let formAjaxData = {
                        transactionId: this.id,
                        version: this.version,
                        updatePhotoList: JSON.stringify(updatePhotoReqList),
                        // coverPhoto: coverPhoto,
                        transactionStatusId: status,
                        transactionTypeId: this.agentForm.transactionTypeId,
                        propertyTypeId: this.agentForm.propertyTypeId,
                        propertySubTypeId: this.agentForm.propertySubTypeId,
                        regionId: this.agentForm.regionId,
                        townshipId: this.agentForm.townshipId,
                        street: this.translateZTUnicode(this.agentForm.street),
                        propertyName: this.translateZTUnicode(this.agentForm.propertyName),
                        totalFloor: this.agentForm.totalFloor,
                        floorNo: this.agentForm.floorNo,
                        masterBedrooms: this.agentForm.masterBedrooms,
                        bathrooms: this.agentForm.bathrooms,
                        bedrooms: this.agentForm.bedrooms,
                        floorLength: this.agentForm.floorLength,
                        floorWidth: this.agentForm.floorWidth,
                        floorSize: this.agentForm.floorSize,
                        landLength: this.agentForm.landLength,
                        landWidth: this.agentForm.landWidth,
                        landSize: this.agentForm.landSize,
                        mmkPrice: this.agentForm.mmkPrice,
                        usdPrice: this.agentForm.usdPrice,
                        conditionTypeId: this.agentForm.conditionTypeId,
                        description: this.translateZTUnicode(this.agentForm.description),
                        latitude: googleMapInfo.lat,
                        longitude: googleMapInfo.lng,
                        furnishingId: this.agentForm.furnishingId,
                        buildYear: this.agentForm.buildYear,
                        facingId: this.agentForm.facingId,
                        indoorFeatures: this.agentForm.indoorFeatures,
                        outdoorFeatures: this.agentForm.outdoorFeatures,
                        specialFeatures: this.agentForm.specialFeatures,
                        burmeseTitle: this.translateZTUnicode(this.agentForm.burmeseTitle),
                        englishTitle: this.translateZTUnicode(this.agentForm.englishTitle)
                    }
                    // console.log(formAjaxData)
                    let params = Qs.stringify(formAjaxData)
                    let config = {
                        'Content-Type': 'multipart/form-data'
                    }
                    updateAgentInfo(params, config)
                        .then((res) => {
                            if (res) {
                                if (res.data) {
                                    if (res.data.errorID === 0) {
                                        console.log('表单信息提交成功')
                                        let transactionId = this.id
                                        console.log(res.data)
                                        this.sendAgentFormPhotos(transactionId)
                                    } else if (res.data.errorID === 100004) {
                                        this.$router.push('/login')
                                        this.fullscreenLoading = false
                                        this.showToast(res.data.errorID)
                                    } else {
                                        this.fullscreenLoading = false
                                        this.showToast(res.data.errorID)
                                    }
                                }
                            }
                        })
                        .catch((error) => {
                            console.log(error)
                            this.fullscreenLoading = false
                            this.messageToastErr('error,please try again later')
                        })
                } else {
                    let formAjaxData = {
                        // coverPhoto: coverPhoto,
                        transactionStatusId: status,
                        transactionTypeId: this.agentForm.transactionTypeId,
                        propertyTypeId: this.agentForm.propertyTypeId,
                        propertySubTypeId: this.agentForm.propertySubTypeId,
                        regionId: this.agentForm.regionId,
                        townshipId: this.agentForm.townshipId,
                        street: this.translateZTUnicode(this.agentForm.street),
                        propertyName: this.translateZTUnicode(this.agentForm.propertyName),
                        totalFloor: this.agentForm.totalFloor,
                        floorNo: this.agentForm.floorNo,
                        masterBedrooms: this.agentForm.masterBedrooms,
                        bathrooms: this.agentForm.bathrooms,
                        bedrooms: this.agentForm.bedrooms,
                        floorLength: this.agentForm.floorLength,
                        floorWidth: this.agentForm.floorWidth,
                        floorSize: this.agentForm.floorSize,
                        landLength: this.agentForm.landLength,
                        landWidth: this.agentForm.landWidth,
                        landSize: this.agentForm.landSize,
                        mmkPrice: this.agentForm.mmkPrice,
                        usdPrice: this.agentForm.usdPrice,
                        conditionTypeId: this.agentForm.conditionTypeId,
                        description: this.translateZTUnicode(this.agentForm.description),
                        latitude: googleMapInfo.lat,
                        longitude: googleMapInfo.lng,
                        furnishingId: this.agentForm.furnishingId,
                        buildYear: this.agentForm.buildYear,
                        facingId: this.agentForm.facingId,
                        indoorFeatures: this.agentForm.indoorFeatures,
                        outdoorFeatures: this.agentForm.outdoorFeatures,
                        specialFeatures: this.agentForm.specialFeatures,
                        burmeseTitle: this.translateZTUnicode(this.agentForm.burmeseTitle),
                        englishTitle: this.translateZTUnicode(this.agentForm.englishTitle)
                    }
                    console.log(formAjaxData)
                    let params = Qs.stringify(formAjaxData)
                    let config = {
                        'Content-Type': 'multipart/form-data'
                    }
                    uploadAgentInfo(params, config)
                        .then((res) => {
                            if (res) {
                                if (res.data) {
                                    if (res.data.errorID === 0) {
                                        console.log('表单信息提交成功')
                                        let transactionId = res.data.object
                                        console.log(res.data)
                                        this.sendAgentFormPhotos(transactionId)
                                    } else if (res.data.errorID === 100004) {
                                        this.$router.push('/login')
                                        this.fullscreenLoading = false
                                        this.showToast(res.data.errorID)
                                    } else {
                                        this.fullscreenLoading = false
                                        this.showToast(res.data.errorID)
                                    }
                                }
                            }
                        })
                        .catch((error) => {
                            console.log(error)
                            this.fullscreenLoading = false
                            this.messageToastErr('error,please try again later')
                        })
                }
            },
            onSubmit(status) {
                // 表单校验
                // 首先清空一遍错误信息
                this.validate = {
                    category: false,
                    title: false,
                    price: false,
                    condition: false,
                    location: false,
                };
                if (!this.form.categoryid) {
                    this.validate.category = true;
                }
                if (!this.form.title) {
                    this.validate.title = true;
                }
                if (!this.form.price) {
                    this.validate.price = true;
                }
                if (!this.conditionRadio) {
                    this.validate.condition = true;
                }
                if (!this.form.location) {
                    this.validate.location = true;
                }
                // 校验主图是否存在
                if (!this.form.coverPhoto) {
                    this.$toast.fail('Please upload cover photo');
                    return;
                }
                // 检验是否必填项完成
                for (let i in this.validate) {
                    if (this.validate[i]) {
                        this.$toast.fail('Required filed cannot be empty');
                        return;
                    }
                }
                // console.log(formData, '图片上传的数据')
                let data = {
                    categoryId: this.form.categoryid || '',
                    category: this.form.category || '',
                    title: this.form.title || '',
                    priceType: this.form.priceType || '',  // 1: kyat  2: lakh  3：USD
                    price: this.form.price || '',
                    condition: this.conditionRadio || '',
                    regionId: this.form.regionId || '',
                    townshipId: this.form.townshipId || '',
                    desc: this.form.description || '',
                    values: []
                }


                let data2={
                    // transactionStatusId: status,
                    // rent or sale
                    transactionTypeId: this.form.transactionTypeId,
                    propertyTypeId: this.form.propertyTypeId,
                    propertySubTypeId: this.form.propertySubTypeId,
                    regionId: this.form.regionId,
                    townshipId: this.form.townshipId,
                    street: this.translateZTUnicode(this.form.street),
                    propertyName: this.translateZTUnicode(this.form.propertyName),
                    totalFloor: this.form.totalFloor,
                    floorNo: this.form.floorNo,
                    masterBedrooms: this.form.masterBedrooms,
                    bathrooms: this.form.bathrooms,
                    bedrooms: this.form.bedrooms,
                    floorLength: this.form.floorLength,
                    floorWidth: this.form.floorWidth,
                    floorSize: this.form.floorSize,
                    landLength: this.form.landLength,
                    landWidth: this.form.landWidth,
                    landSize: this.form.landSize,
                    mmkPrice: this.form.mmkPrice,
                    usdPrice: this.form.usdPrice,
                    conditionTypeId: this.form.conditionTypeId,
                    description: this.translateZTUnicode(this.form.description),
                    furnishingId: this.form.furnishingId,
                    buildYear: this.form.buildYear,
                    facingId: this.form.facingId,
                    indoorFeatures: this.form.indoorFeatures,
                    outdoorFeatures: this.form.outdoorFeatures,
                    specialFeatures: this.form.specialFeatures,
                    burmeseTitle: this.translateZTUnicode(this.form.burmeseTitle),
                    englishTitle: this.translateZTUnicode(this.form.englishTitle)
                }

                // 翻译 data 输入部分翻译  提交的时候 如果是mm  则一律转为unicode
                // 所有上传编辑部分的字段默认转unicode
                // if (this.$store.state.store.localLang == 'MM') {
                data.title = this.$translateLang(data.title, 'zawgyiTounicode') || '';
                data.desc = this.$translateLang(data.desc, 'zawgyiTounicode') || '';
                // }

                // 额外属性传值
                for (let i in this.otherForm) {

                    let valueId = '';

                    // 通过当前选中的 category 所设置的额外属性的json 来进行判断
                    for (let j = 0; j < this.otherPropertyJson.length; j++) {
                        if (this.otherPropertyJson[j].id == i) {   // 比较属性id
                            if (this.otherPropertyJson[j].values.length > 1) {
                                for (let k = 0; k < this.otherPropertyJson[j].values.length; k++) {
                                    if (this.otherForm[i] == this.otherPropertyJson[j].values[k].text) {
                                        valueId = this.otherPropertyJson[j].values[k].id
                                    }
                                }
                            } else {
                                valueId = this.otherPropertyJson[j].values[0].id
                            }
                        }
                    }

                    // 额外属性 输入部分翻译  提交的时候 如果是mm  则一律转为unicode 最新修改为所有字段统一转unicode

                    if (i == 51) {
                        data.brand = this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || '';
                    }

                    data.values.push({
                        propertyId: i,
                        valueId: valueId,
                        text: this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || ''
                    })

                    // if (this.$store.state.store.localLang == 'MM') {
                    //     // brand 额外处理，方便搜索用
                    //     if (i == 51) {
                    //         data.brand = this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || '';
                    //     }
                    //
                    //     data.values.push({
                    //         propertyId: i,
                    //         valueId: valueId,
                    //         text: this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || ''
                    //     })
                    // } else {
                    //     // brand 额外处理，方便搜索用
                    //     if (i == 51) {
                    //         data.brand = this.otherForm[i] || '';
                    //     }
                    //
                    //     data.values.push({
                    //         propertyId: i,
                    //         valueId: valueId,
                    //         text: this.otherForm[i]
                    //     })
                    // }
                }


                // 如果values为空则删除  否则转义字符串
                if (data.values.length == 0) {
                    delete data.values;
                } else {
                    data.values = JSON.stringify(data.values)
                }

                // console.log(data, '将要上传的数据')

                let config = {
                    'Content-Type': 'multipart/form-data'
                }

                const loading = this.$toast.loading({
                    duration: 0,       // 持续展示 toast
                    forbidClick: true, // 禁用背景点击
                    mask: true,
                    message: ''
                });

                if (this.goodsId) { // 编辑逻辑

                    data.goodsId = this.goodsId;
                    data.status = this.status || ''


                    // 比对图片位置数据 数组取交集
                    let that = this;

                    let positionArr = this.sequenceArr.filter(function (v) {
                        return that.editPhotoArr.indexOf(v) !== -1  // 利用filter方法来遍历是否有相同的元素
                    })

                    // 根据位置获取到原始数据的图片id
                    data.images = [];

                    for (let i = 0; i < this.resPhotoArr.length; i++) {
                        for (let j = 0; j < positionArr.length; j++) {
                            if (this.resPhotoArr[i].sequence == positionArr[j]) {
                                data.images.push(this.resPhotoArr[i].id)
                            }
                        }
                    }

                    data.images = JSON.stringify(data.images)

                    data = qs.stringify(data)

                    sellOnEdit(data, config).then((res) => {
                        if (res.data.errorID == 100004) {
                            loading.clear();
                            this.$toast('Please Login!')
                            this.$router.push('/login-register/loginregister')
                        }

                        if (res.data.errorID == 0) {
                            // 如果表单上传成功之后（获取到goodid）

                            // 图片数据上传准备  一个数组，第一张为主图
                            let formData = new FormData();

                            formData.append('goodsId', res.data.object.id)

                            if (this.form.coverPhotoBlob) {
                                formData.append('Images0', this.form.coverPhotoBlob)
                            }

                            if (this.form.otherPhotoBlob) {
                                // 需要剔除空数据
                                for (let i = 1; i < this.form.otherPhotoBlob.length; i++) {
                                    if (this.form.otherPhotoBlob[i]) {
                                        formData.append(`Images${i}`, this.form.otherPhotoBlob[i])
                                    }
                                }
                            }
                            if (!(this.form.coverPhotoBlob || this.checkOtherPhotoBlob(this.form.otherPhotoBlob))) {  // 图片没有需要上传的blob
                                loading.clear();
                                this.$toast.success('Successful')
                                this.showMask = true
                                setTimeout(() => {
                                    this.showMask = false
                                    this.$router.push('/user/myitems')
                                }, 1000);
                                return;
                            }

                            // 检测当前formData中存了几个键值对，解决只进行删除操作的问题
                            let formDataKeyArr = [];
                            for (let key of formData.keys()) {
                                formDataKeyArr.push(key);
                            }

                            // 如果成功之后 上传图片
                            if (formDataKeyArr.length > 1) {
                                sellUpload(formData).then((res) => {
                                    loading.clear();
                                    if (res.data.errorID == 0) {
                                        this.$toast.clear();
                                        this.$toast.success('Successful')
                                        this.showMask = true
                                        setTimeout(() => {
                                            this.showMask = false
                                            this.$router.push('/user/myitems')
                                        }, 1000);
                                    } else {
                                        this.$toast.clear();
                                        this.$toast.fail('failed');
                                    }
                                }).catch((e) => {
                                    this.$toast.clear();
                                    // console.log(e)
                                })
                            }

                        } else {
                            this.$toast.clear();
                            this.$toast.fail('failed');
                            return;
                        }

                    }).catch((e) => {
                        loading.clear();
                        this.$toast.clear();
                        // console.log(e)
                    })
                } else {
                    // 新增的时候
                    data.status = status; // 上传状态
                    data = qs.stringify(data)
                    sellOnshelf(data, config).then((res) => {
                        if (res.data.errorID == 100004) {
                            loading.clear();
                            this.$toast('Please Login!')
                            this.$router.push('/login-register/loginregister')
                        }

                        if (res.data.errorID == 0) {
                            // 如果表单上传成功之后（获取到goodid）

                            // 图片数据上传准备  一个数组，第一张为主图
                            let formData = new FormData();

                            formData.append('goodsId', res.data.object.id)
                            formData.append('Images0', this.form.coverPhotoBlob)

                            // 需要剔除空数据
                            for (let i = 1; i < this.form.otherPhotoBlob.length; i++) {
                                if (this.form.otherPhotoBlob[i]) {
                                    formData.append(`Images${i}`, this.form.otherPhotoBlob[i])
                                }
                            }

                            // 如果成功之后 上传图片
                            sellUpload(formData).then((res) => {
                                loading.clear();
                                if (res.data.errorID == 0) {
                                    this.$toast.clear();
                                    this.$toast.success('Successful')
                                    this.showMask = true
                                    setTimeout(() => {
                                        this.showMask = false
                                        this.$router.push('/user/myitems')
                                    }, 1000);
                                } else {
                                    this.$toast.clear();
                                    this.$toast.fail('failed');
                                }
                            }).catch((e) => {
                                this.$toast.clear();
                                // console.log(e)
                            })

                        } else {
                            this.$toast.clear();
                            this.$toast.fail('failed');
                            return;
                        }

                    }).catch((e) => {
                        loading.clear();
                        this.$toast.clear();
                        // console.log(e)
                    })
                }

            },










            onClickRadio() {
                console.log(this.form.transactionTypeId)
                this.form.condition = ' '
                this.validate.condition = false;
                this.showConditionMessage = false;
            },

            setBathroom(value, text) {
                this.bathroom = text
                this.showBathroom = false
            },
            //选择floorsize type
            selectFloorSizeType(num){
                this.floorSize=num
            },
            //选择landsize type
            selectLandSizeType(num){
                this.landSize=num
            },
            onValueChange(e, item) {
                if (this.form[item] == '') {
                    this.validate[item] = true
                } else {
                    this.validate[item] = false
                }

                if (item == 'price') {
                    if (this.form.price.length == 1) {
                        this.form.price = this.form.price.replace(/[^1-9]/g, '')
                    } else {
                        this.form.price = this.form.price.replace(/\D/g, '')
                        if (this.form.price > 9999999999) {
                            this.form.price = 9999999999;
                        }
                    }
                }

            },
            //图片相关方法
            onReadCoverPhoto(file) {
                console.dir(file)
                let e = file.file;
                let name = file.file.name;
                let that = this;
                this.setImageCompress(e, name, file.content, (imgObj) => {
                    // let imgObj = {
                    //     photoUrl: srcUrl,
                    //     photoBlob: blob,
                    //     name: name,
                    // }
                    that.form.coverPhoto = imgObj.photoUrl;
                    that.form.coverPhotoBlob = imgObj.photoBlob;
                    // console.log(imgObj, '回调拿到的压缩后的img')
                })

            },
            // 主图取消
            onCoverPhotoCancel() {
                this.form.coverPhoto = '';
                this.form.coverPhotoBlob = '';

                this.editPhotoArr.push(0)
                // 数组去重复
                this.editPhotoArr = [...new Set(this.editPhotoArr)]
            },
            // 读取附加图片
            onReadOtherPhoto(file, index) {
                // console.log(file, '读取文件')
                let e = file.file;
                let name = file.file.name;
                let that = this;
                this.setImageCompress(e, name, file.content, (imgObj) => {
                    // let imgObj = {
                    //     photoUrl: srcUrl,
                    //     photoBlob: blob,
                    //     name: name,
                    // }

                    // vue是通过检测get,set才得知数据是否更新的，而对于数组来说，是没有get，set方法的，所以需要我们自己手动触发，需要发送消息通知vue
                    that.$set(this.form.otherPhoto, index, imgObj.photoUrl)

                    // 数组blob (可能为空 上传需要判断剔除)
                    that.form.otherPhotoBlob[index] = imgObj.photoBlob;

                    // console.log(imgObj, '回调拿到的压缩后的img')
                })
            },
            //onOtherPhotoArrDel 额外图片删除
            onOtherPhotoArrDel(index) {
                this.$set(this.form.otherPhoto, index, '')
                if (this.form.otherPhotoBlob[index]) {
                    this.form.otherPhotoBlob[index] = '';
                }
                this.editPhotoArr.push(index)
                // 需要去重复
                this.editPhotoArr = [...new Set(this.editPhotoArr)]
            },
            // 压缩图片
            setImageCompress(e, name, content, callback) {
                let img = new Image()
                let reader = new FileReader()
                let u = navigator.userAgent;
                let Orientation = null
                //异步获取图片对象的方向信息
                EXIF.getData(e, function () {
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation')
                })
                //fileReader异步读取文件
                reader.onload = function (e) {
                    //ev是文件读取的事件对象，读取成功后，拿到结果
                    img.src = e.target.result;
                    //等待新建的image对象加载完成
                    img.onload = function () {
                        // 先是对图像尺寸进行处理，图片原始尺寸
                        let originWidth = this.width
                        let originHeight = this.height
                        // 最大尺寸限制
                        let maxWidth = 1000
                        let maxHeight = 1000
                        // 目标尺寸
                        let targetWidth = originWidth
                        let targetHeight = originHeight
                        // 图片尺寸超过1000x1000的限制
                        if (originWidth > maxWidth || originHeight > maxHeight) {
                            if (originWidth / originHeight > maxWidth / maxHeight) {
                                // 更宽，按照宽度限定尺寸
                                targetWidth = maxWidth
                                targetHeight = Math.round(maxWidth * (originHeight / originWidth))
                            } else {
                                targetHeight = maxHeight
                                targetWidth = Math.round(maxHeight * (originWidth / originHeight))
                            }
                        }
                        // canvas对图片进行缩放
                        let canvas = document.createElement('canvas')
                        let context = canvas.getContext('2d')
                        canvas.width = targetWidth
                        canvas.height = targetHeight
                        if (u.match(/iphone/i) || u.match(/MI 8 Lite/i)) {
                            //苹果和小米8拍照后会自动将照片逆时针旋转90度，下面要做的就是根据拍摄角度在canvas上做对应的旋转截取，使得无论从什么角度拍摄，最终显示的都是正的
                            if (Orientation && Orientation != 1) {
                                switch (Orientation) {
                                    //case6 对应的是竖直时拍摄的结果，拿到的图片对象是已经被苹果处理过的逆时针旋转90度的结果，所以这里要顺时针旋转90度纠正过来
                                    case 6:
                                        canvas.width = targetHeight;
                                        canvas.height = targetWidth;
                                        context.rotate(Math.PI / 2);
                                        context.drawImage(this, 0, -targetHeight, targetWidth, targetHeight);
                                        break;
                                    //case3 对应的是顺时针旋转90度拍的，要顺时针旋转180度矫正
                                    case 3:
                                        context.rotate(Math.PI);
                                        context.drawImage(this, -targetWidth, -targetHeight, targetWidth, targetHeight);
                                        break;
                                    //case 8 对应的是旋转180度倒着拍的，要顺时针旋转270度矫正
                                    case 8:
                                        canvas.width = targetHeight;
                                        canvas.height = targetWidth;
                                        context.rotate(3 * Math.PI / 2);
                                        context.drawImage(this, -targetWidth, 0, targetWidth, targetHeight);
                                        break;
                                }
                            }
                            else {
                                //逆时针旋转90度拍的，或者没有定义，不用旋转处理，直接拉取
                                context.drawImage(this, 0, 0, targetWidth, targetHeight)
                            }
                        }
                        else {
                            //不是苹果小米8，直接拉取
                            context.drawImage(this, 0, 0, targetWidth, targetHeight)
                        }
                        // canvas转为blob并上传
                        canvas.toBlob((blob) => {
                            let srcUrl = canvas.toDataURL("image/jpeg", 0.9);
                            let imgObj = {
                                photoUrl: srcUrl,
                                photoBlob: blob,
                                name: name,
                            }
                            callback(imgObj);
                        }, 'image/jpeg', 0.9)
                    }
                }
                //读取图片对象的内容，获得url地址，这个同步的代码，必定先于前面两处异步代码执行
                reader.readAsDataURL(e);
            },
        },
        computed: {
            // type选择相关
            propertyType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_propertyType
                } else {
                    return propertyType
                }
            },
            propertySubType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_propertySubType
                } else {
                    return propertySubType
                }
            },
            // 区域相关
            regions() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_regions
                } else {
                    return regions
                }
            },
            regionJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_regions
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_regions
                } else {
                    return regions
                }
            },
            townshipJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_townships
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_townships
                } else {
                    return townships
                }
            },
            // floor相关
            floorsTotal() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_floorsTotal
                } else {
                    return floorsTotal
                }
            },
            floors() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_floors
                } else {
                    return floors
                }
            },
            computeFloorSize() {
                return (Number(this.form.floorLength) * Number(this.form.floorWidth)).toFixed(2)
            },
            computeLandSize() {
                return (Number(this.form.landLength) * Number(this.form.landWidth)).toFixed(2)
            },
            masters() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_masterBedroomBathroom
                } else {
                    return masterBedroomBathroom
                }
            },
            bedrooms() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_masterBedroomBathroom
                } else {
                    return masterBedroomBathroom
                }
            },
            bathrooms() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_masterBedroomBathroom
                } else {
                    return masterBedroomBathroom
                }
            },
            currency() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_currencyData
                } else {
                    return currencyData
                }
            },
            furnishingType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_furnishingType
                } else {
                    return furnishingType
                }
            },
            facingType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_facingType
                } else {
                    return facingType
                }
            },
            indoorFeaturesType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_indoorFeaturesType
                } else {
                    return indoorFeaturesType
                }
            },
            outdoorFeaturesType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_outdoorFeaturesType
                } else {
                    return outdoorFeaturesType
                }
            },
            specialFeaturesType() {
                if (this.$store.state.localLang == 'MM') {
                    return mm_specialFeaturesType
                } else {
                    return specialFeaturesType
                }
            },
            conditionType() {
                if (this.$store.state.localLang == 'MM') {
                    return [
                        {'value': null, 'text': ''},
                        {'value': 1, 'text': 'ညွိႏွိဳင္း'},
                        {'value': 2, 'text': 'လာေရာက္ေဆြးေႏြးႏိုင္'}
                    ]
                } else {
                    return [
                        {'value': null, 'text': ''},
                        {'value': 1, 'text': 'Negotiable'},
                        {'value': 2, 'text': 'View to Offer'}
                    ]
                }
            }
        },
        mounted() {
            //判断浏览器是否兼容toBlob方法 如果不兼容就在canvas元素的原型上定义toBlob方法
            if (!HTMLCanvasElement.prototype.toBlob) {
                Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                    value: function (callback, type, quality) {
                        let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
                            len = binStr.length,
                            arr = new Uint8Array(len);
                        for (let i = 0; i < len; i++) {
                            arr[i] = binStr.charCodeAt(i);
                        }
                        callback(new Blob([arr], {type: type || 'image/png'}));
                    }
                });
            }
            //下面是构造property type对应的tree select数据
            let typeArr = [];
            for (let i = 0; i < this.propertyType.length; i++) {
                let subTypeArr = [];
                for (let j = 0; j < this.propertySubType.length; j++) {
                    if (this.propertyType[i].value == this.propertySubType[j].propertyTypeId) {
                        subTypeArr.push({
                            text: this.propertySubType[j].text,
                            id: this.propertySubType[j].value,
                        })
                    }
                }
                typeArr.push({
                    id: this.propertyType[i].value,
                    text: this.propertyType[i].text,
                    children: subTypeArr,
                })
            }
            this.items1 = typeArr;
            //下面是构造location'选择对应的tree select数据
            let regionArr = [];
            for (let i = 0; i < this.regionJson.length; i++) {
                let townshipArr = [];
                for (let j = 0; j < this.townshipJson.length; j++) {
                    if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                        townshipArr.push({
                            text: this.townshipJson[j].text,
                            id: this.townshipJson[j].value,
                        })
                    }
                }
                regionArr.push({
                    id: this.regionJson[i].value,
                    text: this.regionJson[i].text,
                    children: townshipArr,
                })
            }
            this.items2 = regionArr;
            window.scroll(0, 0)
        }

    }
</script>
<style>
    .page-sell .van-icon-photograph {
        font-size: 28px;
        line-height: 80px !important;
    }
</style>
<style scoped>
    .condition-modify {
        padding-bottom: 0 ! important;
    }
    .van-field__body{
        flex-direction:row-reverse;
    }
    .van-cell__title span{
        white-space:nowrap;
    }

    .type-item {
        display: inline-block;
        border: solid 1px black;
        padding: 5px;
        margin: 5px;

    }


    .line-wraper {
        display: flex;
        align-items: center;
        margin:5px;
    }

    .line-wraper .building-floor {
        width: 150px;
        white-space: nowrap;
        padding:5px;
    }

    .line-wraper .property-outer-wraper {
        flex: 1;
    }

    .room-detail {
        margin: 35px 0;
    }

    .room-detail .master, .bedroom, .bathroom {
        flex: 1;
        text-align: center;
    }

    .room-detail .property-outer-wraper .property-inner-wraper .property-input {
        width: 25px;
    }
    .floorsize-area .width-height{
        /*display:flex;*/
    }
    .floorsize-area .width-height .wd-wraper{
        display:flex;
        align-items:center;
        over-flow:hidden;
    }
    .floorsize-area .width-height .wd-wraper input{
        /*flex:1;*/
        width:65px;
        height:28px;
    }
    .floorsize-area  .ar-wraper{
        display:flex;
        align-items:center;
    }
    .floorsize-area  .ar-wraper input{
        flex:1;
        height:28px;
        margin:0 10px;
    }

    .address-wraper{
        display:flex;
        align-items:center;
        margin:5px;
    }
    .address-wraper .address{
        padding:5px;
    }
    .address-wraper .address-input{
        flex:1;
        height:29px;
        margin-right:5px;
        text-indent:10px;
    }
    .van-cell__title span{
        white-space: nowrap;
    }
    .desc-area{
        margin:5px;
    }
    .desc-area .desc-title{
        display:flex;
        justify-content: space-between;
    }
    .desc-area textarea{
        width:90%;
        height:100px;
        margin:10px 5%;
        text-indent:20px;
    }
    /*图片上传相关样式*/
    .photo-title:after {
        box-sizing: border-box !important;
        border: none !important;
    }
    .upload-box {
        padding: 0 15px;
        height: 82px;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
    }
    .upload-item {
        min-width: 80px;
        min-height: 80px;
        border: 1px solid #ededed;
        text-align: center;
    }
    .cover-text {
        position: absolute;
        top: -20px;
        left: -10px;
        right: 0;
        margin: 0 auto;
        z-index: 300;
        color: #000;
        width: 100px;
    }

    .readed-photo {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 200;
        width: 80px;
        height: 80px;
    }

    .photo-close {
        position: absolute;
        right: 10px;
        top: 4px;
        z-index: 300;
        width: 8px;
        height: 8px;
    }

</style>
